<template>
  <div
    id="appref"
    :style="{
      '--big-screen-board-base_width': screenSize.width + 'px',
      '--big-screen-board-base_height': screenSize.height + 'px',
    }"
  >
    <div class="big-screen-board" ref="appref">
      <RouterView />
    </div>
  </div>
</template>
<script setup>
import { nextTick, onMounted, ref } from "vue";
import useWatchElement from "@/hooks/useResize.js";
const appref = ref();
const screenSize = ref({
  width: 0,
  height: 0,
});
onMounted(() => {
  nextTick(() => {
    if (appref.value) {
      let y = useWatchElement(
        document.getElementsByTagName("body")[0],
        appref.value
      );
      screenSize.value.width = y.width;
      screenSize.value.height = y.height;
      console.log('y :>> ', y);
    }
  });
});
</script>

<style lang="scss" scoped>
#appref {
  --bigscreen-bgcolor: pink;
  position: relative;
  background-color: var(--bigscreen-bgcolor);
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  .big-screen-board {
    width: var(--big-screen-board-base_width, 1920px);
    height: var(--big-screen-board-base_height, 1080px);
    transition: all .5s;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: left top;
    background-color: beige;
  }
}
</style>
